<script setup lang="ts">
import {ref,onMounted} from "vue";
import {getScreenDeviceInfo, getScreenLearnMaterial, getScreenScoreNotice, getScreenShowVideo} from '@/api/eighteen'
import {CircleCheckFilled} from "@element-plus/icons-vue";
import LogOut from "@/components/LogOut.vue";
const deviceInfo = ref<any>({})
const _getScreenDeviceInfo = ()=>{
  getScreenDeviceInfo().then(res => {
    if (res.code === 200) {
      deviceInfo.value = res.data
      if(deviceInfo.value.deviceId){
        _getScreenLearnMaterial()
        _getScreenShowVideo()
      }
    }
  })
}
const pdfInfo = ref<any>({})
const _getScreenLearnMaterial=()=>{
  getScreenLearnMaterial(deviceInfo.value.deviceId).then((res:any) => {
    if (res.code === 200) {
      pdfInfo.value = res.data
     }
  })
}
const videoInfo = ref<any>({})
const _getScreenShowVideo =()=>{
  getScreenShowVideo(deviceInfo.value.deviceId).then((res:any) => {
    if (res.code === 200) {
      videoInfo.value= res.data
     }
  })
}
const _read = ()=>{
  window.open(pdfInfo.value.fileUrl,'_blank')
}
onMounted(()=>{
  _getScreenDeviceInfo()
})

const open = ref(false)
const notices=ref<any>([])
const handleOpen=()=>{
  getScreenScoreNotice(deviceInfo.value.deviceId).then((res:any) => {
    if (res.code === 200) {
      open.value=true
      notices.value= res.data
    }
  })
}

</script>

<template>
<div class="eq-cont">
  <LogOut top="43px" right="20px" width="50px" height="50px" />
  <div class="eq-top">
    <div class="eq-top_left">
      <span>装置复位状态：</span>
      <em>复位{{deviceInfo.resetStatus===1?'完成':'未完成'}}</em>
      <el-icon style="font-size: 30px">
        <CircleCheckFilled :class="deviceInfo.resetStatus===1?'color-green-500':'color-red-500'" />
      </el-icon>
    </div>
    <div class="eq-top_right m-r-50px" @click="handleOpen">
      <img src="@/assets/eighteen/grade.png" alt="">
      <span>成绩报告</span>
    </div>
  </div>
  <div class="eq-content">
    <div class="eq-left">
      <div class="eq-ul">
        <div class="eq-li eq-head_li">点位名称</div>
        <div class="eq-li eq-head_li">复位状态</div>
      </div>
      <div class="overflow-x-auto h-430px">
        <div class="eq-ul" v-for="(item,index) in deviceInfo.devicePoints" :key="index">
          <div class="eq-li eq-body_li">{{item.name}}</div>
          <div class="eq-li eq-body_li">
            <el-icon style="font-size: 28px">
              <CircleCheckFilled :class="item.resetStatus===1?'color-green-500':'color-red-500'" />
            </el-icon>
          </div>
        </div>
      </div>
    </div>
    <div class="eq-right">
      <div class="eq-tit">{{pdfInfo.title}}</div>
      <div class="eq-study">
        <span class="eq-study_tit">学习资料</span>
        <div class="eq-study_tag cursor-pointer" @click="_read">
          <img src="@/assets/eighteen/study.png" alt="">
          <span>学习资料</span>
        </div>
      </div>
      <div class="eq-flv">
        <span>学习视频</span>
        <video class="eq-video" controls :src="videoInfo.videoUrl"></video>
      </div>
    </div>
  </div>
  <el-dialog
      v-model="open"
      title="成绩报告"
      width="500"
  >
    <el-table :data="notices" height="360">
      <el-table-column prop="deviceNo" label="装置号"  />
      <el-table-column prop="matchLength" label="时长"  />
      <el-table-column prop="matchScore" label="得分" />
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="open = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>

</div>
</template>

<style scoped lang="less">
.eq-cont{
  padding: 51px 43px 0;
}
.eq-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 37px;
  .eq-top_left{
    display: flex;
    align-items: center;
    span{
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 21px;
      font-style: normal;
      color: rgba(255,255,255,0.65);
    }
    em{
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 21px;
      color: #fff;
      font-style: normal;
      margin-right: 11px;
    }
    img{
      width: 29px;
      height: 29px;
    }
  }
  .eq-top_right{
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(51,179,255,0.18);
    border-radius: 6px;
    border: 2px solid #03E0EE;
    width: 115px;
    height: 39px;
    span{
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 18px;
      color: #03E0EE;
      font-style: normal;
      margin-left: 5px;
    }
  }
}
.eq-content{
  display: flex;
  .eq-left{
    margin-right: 29px;
    width: 749px;
    height: 534px;
    padding: 23px 21px 37px;
    background: rgba(11, 57, 133, 0.56);
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.2);
    .eq-ul{
      display: flex;
      align-items: center;
      .eq-li{
        flex: 1;
        height: 51px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 21px;
        color: #fff;
        font-style: normal;
        margin-right: 9px;
        margin-bottom: 9px;
        &.eq-li:last-child{
          margin-right: 0;
        }
      }
      .eq-head_li{
        background: rgba(51,179,255,0.18);
        border: 2px solid #319BE7;
      }
      .eq-body_li{
        background: rgba(255,255,255,0.18);
        border: 2px solid rgba(255,255,255,0.18);
      }
    }
  }
  .eq-right{
    width: 496px;
    height: 535px;
    background: rgba(11, 57, 133, 0.56);
    border-radius: 9px;
    border: 2px solid rgba(255,255,255,0.2);
    padding: 45px 49px 42px 30px;
    .eq-tit{
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 36px;
      color: #fff;
      font-style: normal;
    }
    .eq-study{
      margin: 100px 0 69px;
      display: flex;
      align-items: center;
      .eq-study_tit{
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 21px;
        color: #fff;
        font-style: normal;
        margin-right: 22px;
      }
      .eq-study_tag{
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(51,179,255,0.18);
        border-radius: 6px;
        border: 2px solid #03E0EE;
        width: 115px;
        height: 39px;
        span{
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 18px;
          color: #03E0EE;
          font-style: normal;
          margin-left: 8px;
        }
      }
    }
    .eq-flv{
      display: flex;
      align-items: center;
      span{
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 21px;
        color: #FFFFFF;
        font-style: normal;
        margin-right: 22px;
      }
      .eq-video{
        width: 297px;
        height: 189px;
        border-radius: 4px;
        border: 1px solid #03E0EE;
      }
    }
  }
}
</style>
